<template>
    <div>
        <div @click='minus' class="left">-</div>
        <div class="center">{{count}}</div>
        <div @click='add' class="right">+</div>
    </div>
</template>

<style>
 .left,.right,.center {
     display: inline-block;
     border: 1px solid #555;
     width: 30px;
     height: 30px;
     align-items: center;
     line-height: 30px;

 }
</style>

<script>
    export default {
        props:['goodsCount','goodsId'],
        data(){
            return {
                count:1
            }
        },
        created(){
            this.count = this.goodsCount;
        },
        methods:{
            add(){               
                this.count++;
                this.notify();
            },
            minus(){
                if(this.count<=1) return;
                this.count--;
                this.notify();
            },
            notify(){
                const goods = {
                    goodsId :this.goodsId,
                    count : this.count
                }
                this.$emit('getCountChange',goods);
            }
            
        }
    }
</script>

